<template>

  <div class="zhanshi">

    <!-- top -->
    <div class="top">
      <div class="top-left">
        <!-- <line-chart width="750px" height="352px" /> -->
        <div class="num-body">
          <div class="num">平均心率： <span>{{ this.kt_obj.classHrAvg }}</span></div>
          <div class="num">最高心率： <span>{{ this.kt_obj.classHrMax }}</span></div>
        </div>
        <div style="position: relative;">
          <div class="line-c">
            <line-chart2
              v-if="flag"
              ref="line2"
              width="100%"
              height="100%"
              :x_data="x_data"
              :y_data="y_data"
            />
          </div>
          <div class="sekuai">
            <div class="sekuai-item" />
            <div class="sekuai-item sekuai-item2" />
            <div class="sekuai-item sekuai-item3" />
            <div class="sekuai-item sekuai-item4" />
          </div>

          <div class="bg-sk" />
        </div>

        <!-- <div class="line-c"> -->
        <!-- <line-chart3 v-if="flag" width="100%" height="352px" /> -->
        <!-- <div class="tag">
            <div class="tag-item">开始部分</div>
            <div class="tag-item tag-item2">开始部分</div>
            <div class="tag-item tag-item3">开始部分</div>
            <div class="tag-item tag-item4">开始部分</div>
          </div> -->
        <!-- </div> -->

      </div>
      <div class="top-right">

        <div
          v-for="(item,index) of kt_obj.structureList"
          :key="index"
          class="right-item"
        >
          <div class="line">
            <el-progress
              class="line-bg "
              :class="'line-bg'+index"
              :text-inside="true"
              :stroke-width="32"
              :percentage="60"
              :color="progress[index].color"
            />
            <span class="line-word">{{ item.stageName }}</span>
            <div class="line-last" :style="{color: progress[index].color}">{{ item.evaluate }} <span class="el-icon-success" /></div>
          </div>
          <div class="item-bot">
            <div class="bot-i">
              <p class="p1">平均心率</p>
              <p class="p2">{{ item.hrAvg }}</p>
            </div>
            <div class="bot-i">
              <p class="p1">最高心率</p>
              <p class="p2">{{ item.hrMax }}</p>
            </div>
            <div class="bot-i">
              <p class="p1">有效运动负荷持续时间</p>
              <p class="p2">{{ item.eefTime }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>

</template>

<script>
import LineChart2 from './lineChart2.vue'
// import LineChart3 from './lineChart3.vue'
export default {
  name: 'DetailKetang',
  components: {
    LineChart2
    // LineChart3
  },
  props: {
    kt_obj: {
      type: [Object]
    }
  },
  data() {
    return {
      flag: false,
      progress: [
        {
          color: 'rgba(0, 210, 158, 1)'
        },
        {
          color: 'rgba(125,156,240, 1)'
        },
        {
          color: 'rgba(241,144,53, 1)'
        },
        {
          color: 'rgba(117,63,236, 1)'
        }
      ],
      x_data: [],
      y_data: []
    }
  },
  watch: {
    'kt_obj': function(val) {
      console.log(val)
      this.x_data = val.time
      this.y_data = val.data
      this.$refs.line2.initChart()
    }
  },
  mounted() {
    console.log(this.kt_obj)
  },
  methods: {

  }
}
</script>

<style lang="scss" scoped>
.tag{
  display: flex;
  float: right;
  .tag-item{
    font-size: 14px;
    color: #41CB89;
    position: relative;
    padding-left: 35px;
    margin-left: 20px;

    &::after{
      position: absolute;
      content: '';
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 26px;
      height:4px;
      background-color:#D9F5E7 ;
    }
    &.tag-item2{
      color: #8AABF8;
      &::after{
        color:#E4EBFD ;
      }
    }
    &.tag-item3{
      color: #FFAB4A;
      &::after{
        color:#FFE7CC ;
      }
    }
    &.tag-item4{
      color: #813EF5;
      &::after{
        color:#E5D8FD;
      }
    }
  }
}
.line-bg{
  ::v-deep .el-progress-bar__outer{
    background-color: rgba(53, 200, 36, 0.2);
  }
}
.line-bg1{
  ::v-deep .el-progress-bar__outer{
    background-color: rgba(228, 235, 251,1);
  }
}
.line-bg2{
  ::v-deep .el-progress-bar__outer{
    background-color: rgba(251,232,207, 1);
  }
}
.line-bg3{
  ::v-deep .el-progress-bar__outer{
    background-color: rgba(227,216,249, 1);
  }
}

.tag-body{
  display: flex;
  flex-wrap: wrap;
  .tag-item{
    margin-right: 18px;
    width: 120px;
    height: 32px;
    line-height: 32px;
    border-radius: 32px;
    padding: 0 14px;
    box-sizing: border-box;
    span{
      font-size: 14px;
      float: left;
    }
    .tag-icon{
      font-size: 20px;
      line-height: 32px;
      float: right;
      width: 20px;
      height: 20px;
      // margin-top: 6px ;
    }
    &.success{
      background-color: #d7f4d3;
      span{
        color: #2EA121;
      }
      .tag-icon{
        color:#41CB89 ;
      }
    }
    &.warn{
      background-color: #ffe7cc;
      span{
        color: #ffb362;
      }
      .tag-icon{
        color: #ffb362;
      }
    }
  }
}
.zhanshi{
  // padding: 30rpx;
  .top{
    overflow: hidden;
    padding-left: 25px;
    padding-bottom: 40px;
    // height: 400px;
    .top-left{
      // margin-top: 20px;
      float: left;
      // min-height: 352px;
      position: relative;
      // width: 550px;
      width: calc(100% - 406px - 20px - 115px);
      // background-color: blue;
      .num-body{
        position: absolute;
        display: flex;
        z-index: 9999;
        top: 0;
        left: 200px;
        .num{
          color: #000000;
          font-size: 14px;
          margin-right: 20px;
          span{
            color: #1890FF;
            font-size: 18px;
          }
          &:nth-child(2){
            span{
              color: #F2637B;
            }
          }
        }
      }
    }
    .top-right{
      margin:20px 20px 0 115px;
      float: left;
      width: 406px;
      // height: 352px;
      // background: #FFFFFF;
      // box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.1);
      box-sizing: border-box;
      .right-item{
        margin-bottom: 10px;
        .line{
          position: relative;
          .line-word{
            position: absolute;
            left: 16px;
            top: 0;
            color: rgba(255, 255, 255, 1);
            font-size: 14px;
            line-height: 32px;
          }
          .line-last{
            color: rgba(46, 161, 33, 1);
            font-size: 14px;
            line-height: 32px;
            position: absolute;
            top: 0;
            right: 16px;
          }
        }
        .item-bot{
          display: flex;
          margin-top: 16px;
          justify-content: space-between;
          .bot-i{
            .p1{
              font-size: 14px;
              color: rgba(0, 0, 0, 0.5);
              margin: 0;
            }
            .p2{
              font-size: 20px;
              color:rgba(0, 0, 0, 0.85);
              margin: 0;
              margin-top: 8px;
            }
          }
        }
      }
    }
  }
}
.line-c{
  height: 450px;
}
.bg-sk{
  position: absolute;
  top: 17%;
  width: 80%;
  left: 10%;
  height: 50px;
  background-color: rgba(65, 203, 137, 0.1);
}
.sekuai{
  position: absolute;
  width: 80%;
  display: flex;
  bottom: 7%;
  left: 10%;
  .sekuai-item{
    background-color: rgba(65, 203, 137,0.2);
    height: 30px;
    width: 5%;
    &.sekuai-item2{
      width: 15%;
      background-color: rgba(118, 157, 247, 0.2);
    }
    &.sekuai-item3{
      width: 75%;
      background-color: rgba(255, 137, 0, 0.2);
    }
    &.sekuai-item4{
      width: 5%;
      background-color: rgba(127, 59, 245, 0.2);
    }
  }
}
::v-deep .el-progress-bar__innerText{
  display: none;
}
@media screen and ( max-width: 1400px ) {
  .top-right{
    width: 450px!important;
    margin-left: 0!important;
    .item-bot{
      overflow: hidden;
      margin-top: 5px!important;
      .bot-i{
        display: flex;
        .p2{
          margin-top: -3px!important;
        }
      }
    }
  }
  .top-left{
    width: calc(100% - 450px - 20px )!important;

  }
  .line-c{
    height: 280px;
  }
  .sekuai{
    bottom: 10%;
  }
  .bg-sk{
    top: 20%;
  }
}
// }
</style>
